<template>
	<el-dialog title="安装信息" v-model="visible" :close-on-click-modal="false" draggable width="880px">
		<el-descriptions :column="2" border>
			<el-descriptions-item label-align="center" label="所属单位">{{ rowInfo?.deptName }}</el-descriptions-item>
			<el-descriptions-item label-align="center" label="安装点名称">{{ rowInfo?.address }}</el-descriptions-item>
			<el-descriptions-item label-align="center" label="类型型号">{{ rowInfo?.deviceType }} - {{ rowInfo?.deviceModelName }}</el-descriptions-item>
			<el-descriptions-item label-align="center" label="IMEI"
				><span class="pr-2 whitespace-nowrap">{{ rowInfo?.imei }}</span>
				<el-button size="small" type="primary" @click="handleEditImei" link icon="edit">变更</el-button></el-descriptions-item
			>
			<el-descriptions-item label-align="center" label="建筑物">{{ rowInfo?.buildingName }}</el-descriptions-item>
			<el-descriptions-item label-align="center" label="楼层">{{ rowInfo?.floor }}</el-descriptions-item>
			<el-descriptions-item label-align="center" label="详细地址">{{ rowInfo?.detailAddress }}</el-descriptions-item>
			<el-descriptions-item label-align="center" label="经纬度">{{ rowInfo?.latitude }},{{ rowInfo?.longitude }}</el-descriptions-item>
			<el-descriptions-item label-align="center" label="接警联系人"
				>{{ rowInfo?.alarmWorkerName }}-{{ rowInfo?.alarmWorkerPhone }}</el-descriptions-item
			>
			<el-descriptions-item label-align="center" label="安装时间">{{ rowInfo?.updateTime }}</el-descriptions-item>
			<el-descriptions-item label-align="center" label="首次安装时间">{{ rowInfo?.createTime }}</el-descriptions-item>
			<!-- <el-descriptions-item label-align="center" label="住户资料"></el-descriptions-item> -->
			<el-descriptions-item label-align="center" label="关联设备">{{ rowInfo?.relateCount }}</el-descriptions-item>
			<el-descriptions-item label-align="center" label="被关联设备数">{{ rowInfo?.beRelateCount }}</el-descriptions-item>
			<el-descriptions-item label-align="center" label="安装点备注">{{ rowInfo?.deptNaremarksme }}</el-descriptions-item>
		</el-descriptions>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="visible = false">关闭</el-button>
				<el-button type="primary" @click="handleEdit">修改安装点</el-button>
			</span>
		</template>
		<EditImeiDialog ref="EditImeiDialogRef" @refresh="handleRefresh" />
	</el-dialog>
</template>

<script setup lang="ts" name="LocationDetail">
import { getObj } from '/@/api/installation/basicInstallLocation';
const EditImeiDialog = defineAsyncComponent(() => import('./editImei.vue'));
const emit = defineEmits(['edit', 'refresh']);
// 定义变量内容
const visible = ref(false);
const rowInfo: any = reactive({});
const EditImeiDialogRef = ref();

// 打开弹窗
const openDialog = (id: string) => {
	visible.value = true;
	getObj(id).then((res) => {
		Object.assign(rowInfo, res.data);
	});
};
const handleEdit = () => {
	visible.value = false;
	emit('edit', rowInfo);
};
const handleEditImei = () => {
	EditImeiDialogRef.value.openDialog(rowInfo);
};
const handleRefresh = () => {
	getObj(rowInfo.id).then((res) => {
		Object.assign(rowInfo, res.data);
	});
	emit('refresh');
};
// 暴露变量
defineExpose({
	openDialog,
});
</script>
